<template>
  <div class="top-search with-grey-bottom-border">
    <div @click="$router.push('/msg-center')" class="top-icon">
      <div class="icon-dot"></div>
      <img src="@/assets/车主宝首页改-assets/icon.png" alt="" />
    </div>
    <div class="input-container">
      <input
        @click="handleInputCilck"
        class="search-input"
        placeholder="请输入关键词搜索"
        type="text"
      /><button @click="$router.push('/search')" class="search-btn"></button>
    </div>

    <div v-if="entry === 'mall'" class="top-icon">
      <img @click="$router.push('/category')" src="@/assets/发视频-assets/category.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["entry", 'status'],
  methods: {
    handleInputCilck() {
      if (this.status == 1) {
         this.$router.push('/search')
      } else {
        this.$router.push('/search-video')
      }
    }
   
  }
};
</script>

<style lang="less" scoped>
.top-search {
  background-color: #fff;
  padding: 0.3rem 3.2%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .input-container{
    width: 100%;
    position: relative;
  }
  .search-input {
    box-sizing: border-box;
    width: 100%;
    height: 1.24rem;
    border: none;
    vertical-align: top;
    font-size: 0.56rem;
    padding: 0 0 0 4.22%;
    border-radius: 0.16rem;
    background-color: rgb(245, 245, 245);
    font-size: "微软雅黑";
  }
  .search-btn {
    position: absolute;
    width: 1.24rem;
    height: 1.24rem;
    right: 0.3rem;
    top: 0rem;
    padding: 0;
    border: 0;
    background: none;
    background-image: url("../../assets/商城首页-assets/shousuo.png");
    background-repeat: no-repeat;
    background-size: 60% 60%;
    background-position: 50% 50%;
  }
  .top-icon {
    width: 1.5rem;
    text-align: center;
    height: 1.24rem;
    // line-height: 1.24rem;
    position: relative;
    .icon-dot {
      position: absolute;
      right: 0;
      top: 0;
      width: 0.28rem;
      height: 0.28rem;
      border-radius: 50%;
      background-color: red;
    }
    img {
      margin-top: 0.3rem;
      width: 0.8rem;
    }
  }
}
</style>
